import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import Dialog from '@/components/dialog/Index'
import type { AnyObject } from '@/types'
import { getOnekeyList, handleOnekey } from '@/api/insurance/period'
import type { OperateRecordDto } from '@/api/insurance/period/types'
import DialogAutoRenewalDetail from './DialogAutoRenewalDetail'
import type { FilterDto } from '@/render/FilterRender'
import { getSaleList } from '@/api/sale'
import { DeptTypeCnEnum, PlatformTypeCnEnum } from '@/const/enum'
import { message, Modal } from 'ant-design-vue'
import { confirm } from '@/utils/util'

@Component
export class DialogAutoRenewal extends TableRender {
    @Prop() show!: boolean

    showDialog = false
    showDialogDetail = false
    curItem = {} as OperateRecordDto
    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show')
    handleWatchShow(val: boolean) {
        this.showDialog = val
    }

    @Watch('showDialog')
    handleWatchShowDialog(val: boolean) {
        this.updateShow(val)
    }

    filterConfig() {
        return {
            companyName: {
                name: '公司名称',
                element: 'input'
            },
            deptId: {
                name: '所属分组',
                element: 'select',
                optionsType: 'saleDept',
                callback: {
                    change: () => {
                        this.filters.saleId.options = []
                        this.filters.saleId.value = ''
                    }
                }
            },
            saleId: {
                name: '所属商务',
                element: 'select',
                callback: {
                    focus: async () => {
                        const data = this.getFilters()
                        if (!data.deptId) {
                            message.warning('请先选择分组')
                            return []
                        }

                        this.filters.saleId.options = (
                            await getSaleList({
                                auditStatus: 1,
                                deptId: data.deptId
                            })
                        ).map((item) => {
                            return {
                                label: item.saleName,
                                value: item.saleId
                            }
                        })
                    }
                }
            }
        } as FilterDto
    }

    tableColumnConfigOld = () => [
        {
            field: 'companyName',
            title: '客户名称',
            width: 200
        },
        {
            field: 'total',
            title: '减保人数'
        },
        {
            field: 'totalPlans',
            title: '减保方案数量',
            width: 120
        },
        {
            field: 'msg',
            title: '减保类型'
        },
        {
            field: 'insurStartDate',
            title: '自动减保时间',
            width: 120
        },
        {
            field: 'saleName',
            title: '所属商务',
            width: 120,
            formatter: ({ row }) => {
                return row.saleName + ' | ' + row.deptName
            }
        },
        {
            field: 'operate',
            title: '操作',
            fixed: 'right',
            width: 200,
            params: {
                buttons: [
                    {
                        text: '查看详情',
                        event: (row) => this.onShowDetail(row)
                    },
                    {
                        text: '一键续保',
                        event: (row) => this.onRenewal(row)
                    }
                ]
            },
            slots: {
                default: 'buttons'
            }
        }
    ] as TableRenderColumnTypes<OperateRecordDto>

    onLoadData(page: number, size: number, filters: AnyObject) {
        return getOnekeyList({
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    onShowDetail(row: OperateRecordDto) {
        this.showDialogDetail = true
        this.curItem = row
    }

    async onRenewal(row: OperateRecordDto) {
        await confirm('是否确认一键续保？', '提示')
        const response = await handleOnekey({
            companyId: row.companyId,
            onekeyEnsureType: row.onekeyEnsureType
        })
        if (response.isEnoughBalance) {
            message.success('一键续保成功')
            this.showDialog = false
        } else {
            message.error('账户余额不充足，续保失败')
        }
    }

    render() {
        return (
            <>
                <Dialog
                    v-model:show={this.showDialog}
                    title="自动断保客户"
                    width="800px"
                    v-slots={{
                        default: () => {
                            return <div>{super.render()}</div>
                        }
                    }}
                ></Dialog>
                <DialogAutoRenewalDetail
                    v-model:show={this.showDialogDetail}
                    companyId={this.curItem.companyId}
                    onekeyEnsureType={this.curItem.onekeyEnsureType}
                />
            </>
        )
    }
}

export default toNative<{}, {}>(DialogAutoRenewal)
